<template>
    <div class="nav-body" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0)"
         :class="{ 'nav-collapse': isCollapse }">
        <div class="sys-logo">
            <div v-show="isCollapse" class="img-small">
                <img src="../../../public/images/small_logo.png">
            </div>
            <div v-show="!isCollapse" class="img-big">
                <img src="../../../public/images/small_logo.png" style="transform: translateY(4px);margin-right: 4px;">管理系统平台
            </div>
        </div>
        <el-scrollbar style="height: 100%">
            <el-menu
                    :default-active="$route.path"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    :collapse="isCollapse"
                    background-color="#354052"
                    text-color="#fff"
                    active-text-color="#4977FC"
                    unique-opened
                    router
            >
                <template v-for="item in navTree">
                    <el-menu-item
                            v-if="item.children.length === 0"
                            :index="item.url"
                            :key="item.url"
                            :title="item.name"
                    >
                        <i :class="item.icon"></i>
                        <span slot="title">{{ item.name }}</span>
                    </el-menu-item>
                    <el-submenu
                            v-else
                            :index="item.url"
                            :key="item.name"
                            :title="item.name"
                    >
                        <template slot="title">
                            <i :class="item.icon"></i>
                            <span slot="title">{{ item.name }}</span>
                        </template>
                        <template v-for="secondItem in item.children">
                            <el-menu-item
                                    v-if="secondItem.children.length === 0"
                                    :index="secondItem.url"
                                    :key="secondItem.name"
                                    :title="secondItem.name"
                            >
                  <span slot="title">{{
                    subMyStr(secondItem.name, 8)
                  }}</span>
                            </el-menu-item>
                            <el-submenu
                                    v-else
                                    :index="secondItem.url"
                                    :key="secondItem.name"
                                    :title="secondItem.name"
                            >
                  <span slot="title">{{
                    subMyStr(secondItem.name, 8)
                  }}</span>
                                <template v-for="thirdItem in secondItem.children">
                                    <el-menu-item
                                            v-if="thirdItem.children.length === 0"
                                            :index="thirdItem.url"
                                            :key="thirdItem.name"
                                            :title="thirdItem.name"
                                    >
                                        {{ subMyStr(thirdItem.name, 8) }}
                                    </el-menu-item>
                                    <el-submenu
                                            v-else
                                            :index="thirdItem.url"
                                            :key="thirdItem.name"
                                            :title="thirdItem.name"
                                    >
                                        <span slot="title">{{subMyStr(thirdItem.name, 8)}}</span>
                                        <el-menu-item
                                                v-for="fourltem in thirdItem.children"
                                                :index="fourltem.url"
                                                :key="fourltem.name"
                                                :title="fourltem.name"
                                        >
                                            {{ subMyStr(fourltem.name, 8) }}
                                        </el-menu-item>
                                    </el-submenu>
                                </template>
                            </el-submenu>
                        </template>
                    </el-submenu>
                </template>
            </el-menu>
        </el-scrollbar>
    </div>
</template>

<script>
  import {mapState, mapActions} from 'vuex'

  export default {
    data() {
      return {
        currentRoutePath: 'cluster',
        loading: false
      }
    },
    computed: {
      ...mapState({
        isCollapse: state => state.app.isCollapse,
        navTree: state => state.app.navTree
      })
    },
    mounted() {
      const vm = this
      vm.loading = true
      vm.getNavTree(vm)
      vm.getGlobal(vm)
      // vm.queryFlowSet(vm)
    },
    methods: {
      // ...mapActions('flowSetting', ['queryFlowSet']),
      ...mapActions(['getNavTree', 'getGlobal']),
      handleOpen(key, keyPath) {
        if (key.indexOf('/examine') >= 0) {
          this.$router.push({
            path: key
          })
        }
      }
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
    @import "../../assets/common.scss";

    .el-menu-vertical-demo /deep/ .el-submenu__title {
        height: 40px;
        line-height: 40px;
        font-size: 14px;
    }

    .el-menu-vertical-demo /deep/ .el-submenu .el-menu-item {
        height: 40px;
        line-height: 40px;
        font-size: 14px;
    }

    .nav-collapse {
        width: 64px !important;
    }

    .nav-body {
        -webkit-transition: width 0.3s;
        transition: width 0.3s;
        width: 200px;
        height: 100%;
        position: fixed;
        font-size: 0px;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1001;
        overflow: hidden;
        background: #354052;
        .sys-logo {
            color: $white;
            text-align: center;
            background-color: #4977FC;
            .img-small {
                @include line-height(50px);
                width: 64px;
                img {
                    transform: translateY(10px);
                }
            }
            .img-big {
                width: 100%;
                font-size: 20px;
                font-family: "logo" !important;
                @include line-height(50px);
            }
        }
    }

    .el-menu {
        border-right: none;
    }

    .el-menu--collapse {
        height: 100%;
    }

    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        height: 100%;
    }

    .el-menu-item,
    .el-submenu {
        .fa {
            margin-right: 5px;
            width: 24px;
            text-align: center;
            font-size: 18px;
            vertical-align: middle;
        }
    }

    [class^="fa fa-"] {
        vertical-align: middle;
        font-size: 18px;
        margin-right: 5px;
        width: 24px;
        text-align: center;
        color: $white;
    }
</style>
